<template>
	<view class="content">
		<view class="content_top">
			<image class="background-image" src="../../static/img/bg.png"></image>
			<view class="content_top_box">
				<view class="content_top_box_left">

					<view class="content_top_box_left_name">
						{{name}}
					</view>
				</view>
				<view class="content_top_box_right">

					<tn-avatar size="xl" @click="onImageClick(RLZP_FJ)" :src="RLZP_FJ"></tn-avatar>
				</view>
			</view>
		</view>
		<view class="content_bottom" :style="{ height: dynamicHeight }">
			<view class="content_bottom_success">
				<view class="container">
					<view class="content_bottom_success_icon">
						<image src="../../static/img/circle.png" mode="widthFix" style="width: 420rpx;"></image>
					</view>
					<view class="content_bottom_success_entry">
						<view class="content_bottom_success_entry_title">
							进场
						</view>
						<view class="content_bottom_success_entry_time">
							{{ currentDate }}
						</view>
					</view>
				</view>
				<view class="content_bottom_listBox">
					<view class="content_bottom_listBox_sear">
						<view class="content_bottom_xm_name">
							<view class="content_bottom_xm_name_left">
								项目名称：
							</view>
							<view class="content_bottom_xm_name_right">
								{{BIDDING_PROJECT_NAME}}
							</view>
						
						</view>
						<view class="content_bottom_xm_name">
							<view class="content_bottom_xm_name_left">
								分建单位名称：
							</view>
							<view class="content_bottom_xm_name_right">
								{{SUBPACKAGE_PROJECT_NAME}}
							</view>
						
						</view>
						<view class="content_bottom_xm_name">
							<view class="content_bottom_xm_name_left">
								分建联系人姓名：
							</view>
							<view class="content_bottom_xm_name_right">
								{{USER_NAME}}
							</view>
						
						</view>
						<view class="content_bottom_xm_name">
							<view class="content_bottom_xm_name_left">
								分建联系人电话：
							</view>
							<view class="content_bottom_xm_name_right">
								{{ PHONE_NUMBER }}
							</view>
						
						</view>
						
					</view>
					<view class="content_bottom_list_btn" @click="submit()">
						<span>提交</span>
					</view>
					
				</view>

				<tn-popup :maskCloseable="false" zIndex="98999" v-model="entryShow" borderRadius="50" mode="center"
					width="560rpx" height="800rpx">
					<view class="contentpopur">
						<view class="contentpopur_title">
							进入施工现场安全教育基本要求
						</view>
						<scroll-view scroll-y="true" style="height: 550rpx;margin-top: 40rpx;">
							<view
								style="    font-family: PingFang SC; font-weight: 500;  font-size: 28rpx;  color: #666666;text-align: left;">
							
							<p>1.1   新工人进入工地前必须认真学习本工种安全技术操作规程。未经安全知识教育和培训，不得进入施工现场操作。</p>
							<p>1.2   进入施工现场，必须戴好安全帽，扣好帽带。</p>
							<p>1.3   在没有防护设施的2m高处，悬崖和陡坡施工作业必须系好安全带。</p>
							<p>1.4   高空作业时，不准往下或向上抛材料和工具等物件。</p>
							<p>1.5   不懂电器和机械的人员，严禁使用和玩弄机电设备。</p>
							<p>1.6   建筑材料和构件要堆放整齐稳妥，不要过高。</p>
							<p>1.7   危险区域要有明显标志，要采取防护措施，夜间要设红灯示警。</p>
							<p>1.8   在操作中，应坚守工作岗位，严禁酒后操作。</p>
							<p>1.9   特殊工种（电工、焊工、司炉工、爆破工、起重及打桩司机和指挥、架子工、各种机动车辆司机等）必须经过有关部门专业培训考试合格发给操作证，方准独立操作。</p>
							<p>1.10  施工现场禁止穿拖鞋、高跟鞋、赤脚和易滑、带钉的鞋和赤膊操作。</p>
							<p>1.11  施工现场的脚手架、防护设施、安全标志、警告牌、脚手架连接铅丝或连接件不得擅自拆除，需要拆除必须经过加固后经施工负责人同意。</p>
							<p>1.12  施工现场的洞、坑、井架、升降口、漏斗等危险处，应有防护措施并有明显标志。</p>
							<p>1.13  任何人不准向下、向上乱丢材、物、垃圾、工具等。不准随意开动一切机械。操作中思想要集中，不准开玩笑，做私活。</p>
							<p>1.14  不准坐在脚手架防护栏杆上休息和在脚手架上睡觉。</p>
							<p>1.15  手推车装运物料，应注意平稳，掌握重心，不得猛跑或撒把溜放。</p>
							<p>1.16  拆下的脚手架、钢模板、轧头或木模、支撑要及时整理，圆钉要及时拔除。</p>
							<p>1.17  砌墙斩砖要朝里斩，不准朝外斩，防止碎砖堕落伤人。</p>
							<p>1.18  工具用好后要随时装入工具袋。</p>
							<p>1.19  不准在井架内穿行，不准在井架提升后不采取安全措施到下面去清理砂浆、混凝土等杂物，不准吊篮久停空中，下班后吊篮必须放在地面上，且切断电源。</p>
							<p>1.20  脚手架上霜、雪、泥等要及时清扫。</p>
							<p>1.21  脚手板两端间要扎牢，防止空头板（竹脚手片要四点扎牢）。</p>
							<p>1.22  脚手架超载危险：砌筑脚手架均布荷载每平方米不得超过270kg，即在脚手架上堆放标准砖不得超过单行侧放三侧高。20孔多孔砖不得超过单行侧放四侧高。非承重三孔砖不得超过单行平放五皮高。只允许二排脚手架上同时堆放。脚手架连接物拆除危险；坐在防护栏杆上休息危险；搭、拆脚手架和井字架不系安全带危险。</p>
							<p>1.23  单梯上部要扎牢，下部要有防滑措施。</p>
							<p>1.24  挂梯上部要挂牢，下部要绑扎。</p>
							<p>1.25  人字梯中间要扎牢，下部要有防滑措施，不准人坐在上面，骑马式移动。</p>
							<p>1.26  高空：从事高空作业的人员，必须身体健康，严禁患有高血压、贫血症、严重心脏病、精神症、癫痫病、深度近视眼在500度以上人员，以及经医生检查认为不适合高空作业的人员，不得从事高空作业。对井架，起重工等从事高空作业的工种人员要每年体检检查一次。</p>
							<p>1.26.1 在平台、屋檐口操作时，面部要朝外，系好安全带。</p>
							<p>1.26.2 高处作业不要用力过猛，防止失去平衡而坠落。</p>
							<p>1.26.3 在平台等处拆木模撬棒要朝里，不要向外，防止人向外坠落。</p>
							<p>1.26.4 遇有暴雨、浓雾和六级以上强风应停止室外作业。</p>
							<p>1.26.5 夜间施工必须要有充分的照明。</p>
							</view>
						</scroll-view>
						<view class="confrim-btn">
							<tn-button shape="round" size="lg" :backgroundColor="buttonBackgroundColor"
								fontColor="#ffffff" :disabled="isButtonDisabled" @click="confirmAndKnow">
								<template v-if="!isTimeZero">
									确认并知悉({{ remainingTime }}s)
								</template>
								<template v-else >
									确认并知悉
								</template>
							</tn-button>
						</view>
					</view>
				</tn-popup>
			</view>
			<view class="content_bottom_list">
			
			</view>
		</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				dynamicHeight: '', // 默认高度样式
				projectNo: '',
				isTimeZero: false, // 标志位，用于控制文本显示
				entryShow: false, // 控制弹窗显示
				isButtonDisabled: true, // 控制按钮是否可点击
				countdown: 10,
				remainingTime: 10,
				RLZP_FJ: '',
				name: '',
				buttonBackgroundColor: '#CCCCCC', // 初始按钮背景色
				BIDDING_PROJECT_NAME: '',
				SUBPACKAGE_PROJECT_NAME: '',
				USER_NAME: '',
				PHONE_NUMBER: '',
				isFirst: '0'

			}
		},
		computed: {
			currentDate() {
				// 返回当前日期的字符串表示（YYYY-MM-DD）
				return new Date().toISOString().split('T')[0];
			}
		},
		onLoad(options) {
			this.name = uni.getStorageSync('USER_NAME');
			this.RLZP_FJ = BASE_URL + '/portal/r' + uni.getStorageSync('lwphoto').slice(1);


			uni.getSystemInfo({
				success: (info) => {
					if (info.screenHeight <= 667) { // 假设iPhone X的高度是812像素
						this.dynamicHeight = 'calc(100% + 200rpx)'; // 如果设备高度小于iPhone X，则添加额外的200rpx
					}else{
							this.dynamicHeight = 'calc(100% - 200rpx)';
					}
				},
			});
			if (options && options.data) {
				this.projectNo = options.data;
				console.log(this.projectNo, 'this.projectNo')
				// 在这里可以对接收到的数据进行处理
				this.getXMdetail();
			}
		},
		methods: {
			onImageClick(imageUrl) {
				console.log(imageUrl, 'imageUrl')
				const current = imageUrl;
				uni.previewImage({
					current: current, // 当前显示图片的链接
					// urls 数组只需要包含当前图片的URL，因为只预览一张
					urls: [current]
				});

			},
			async getXMdetail() {
				try {
					const url = '/portal/r/w'; // 替换为你的 API 地址
					const params = {
						// 构造你的请求参数
						sid: uni.getStorageSync('SID'),
						cmd: 'sfeg.srm.workers.join.apply.isFirstApproach',
						openId: uni.getStorageSync('OPEN_ID'),
						buyingTaskNo: this.projectNo
					};

					// 发送 POST 请求
					const response = await this.$get(url, params);

					// 处理请求成功的逻辑
					console.log('请求成功个人数据', response);
					this.BIDDING_PROJECT_NAME = response.data.BIDDING_PROJECT_NAME;
					this.SUBPACKAGE_PROJECT_NAME = response.data.SUBPACKAGE_PROJECT_NAME;
					this.USER_NAME = response.data.USER_NAME;
					this.PHONE_NUMBER = response.data.PHONE_NUMBER;
					this.isFirst = response.data.isFirst;

				} catch (error) {
					// 处理请求失败的逻辑
					console.error('请求失败', error);
				}
			},
			async submit() {
				if (this.isFirst == '0') {
					this.entryShow = true;
					this.startCountdown();
				} else {
					try {
						const url = '/portal/r/w'; // 替换为你的 API 地址
						const params = {
							// 构造你的请求参数
							sid: uni.getStorageSync('SID'),
							cmd: 'sfeg.srm.workers.join.apply.personnelApproach',
							openId: uni.getStorageSync('OPEN_ID'),
							uaInfo: '809653211',
							buyingTaskNo: this.projectNo
						};

						// 发送 POST 请求
						const response = await this.$get(url, params);

						// 处理请求成功的逻辑
						console.log('请求成功个人数据111', response);
						if (response.result == 'ok') {
							uni.navigateTo({
								url: '../entrySuccess/entrySuccess'
							});
						}

					} catch (error) {
						// 处理请求失败的逻辑
						console.error('请求失败', error);
					}
				}
				// uni.navigateTo({
				// 	url: '../entrySuccess/entrySuccess'
				// });
			},
			startCountdown() {
				const intervalId = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
						this.remainingTime = this.countdown;
						this.buttonBackgroundColor = '#CCCCCC'; // 倒计时期间置灰
					} else {
						clearInterval(intervalId);
						this.isTimeZero = true;
						this.isButtonDisabled = false; // 倒计时结束，允许点击按钮
						this.buttonBackgroundColor = '#3A84FD'; // 恢复初始背景色
					}
				}, 1000);
			},
			async confirmAndKnow() {
				this.entryShow = false; // 关闭弹窗
				try {
					const url = '/portal/r/w'; // 替换为你的 API 地址
					const params = {
						// 构造你的请求参数
						sid: uni.getStorageSync('SID'),
						cmd: 'sfeg.srm.workers.join.apply.personnelApproach',
						openId: uni.getStorageSync('OPEN_ID'),
						uaInfo: '809653211',
						buyingTaskNo: this.projectNo
					};

					// 发送 POST 请求
					const response = await this.$get(url, params);

					// 处理请求成功的逻辑
					console.log('请求成功个人数据111', response);
					if (response.result == 'ok') {
						uni.navigateTo({
							url: '../entrySuccess/entrySuccess'
						});
					}

				} catch (error) {
					// 处理请求失败的逻辑
					console.error('请求失败', error);
				}
				// 其他逻辑，如提交确认信息等
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		/* 占据整个视口高度 */
		display: flex;
		flex-direction: column;
		position: relative;
		/* 相对定位，以便子元素可以相对于它定位 */
	}

	.confrim-btn {
		text-align: center;
		margin-top: 10rpx;
	}

	.contentpopur {
		padding: 25rpx;

		.contentpopur_title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			text-align: center;
		}

	}

	.content_top {

		position: relative;
		/* 设置相对定位，以便子元素可以相对于它定位 */
		width: 100%;
		/* 宽度百分之百 */
		height: 500rpx;
		/* 设置高度 */
		overflow: hidden;

		/* 触发 BFC */
		.background-image {
			position: absolute;
			/* 设置绝对定位，让背景图充满整个父容器 */
			top: 0;
			left: 0;
			width: 100%;
			/* 宽度百分之百 */
			height: 100%;
			/* 高度百分之百 */
			object-fit: cover;
			/* 图片填充父容器 */
			z-index: -1;
			/* 将背景图放到底层 */
		}

		.content_top_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 33rpx 73rpx 0 73rpx;

			.content_top_box_left {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 48rpx;
				color: #FFFFFF;
			}

			.content_top_box_right {}
		}
	}

	.content_bottom {
		flex: 1;
		/* 自动填充剩余空间 */
		position: absolute;
		/* 绝对定位，覆盖在 .content_top 上方 */
		top: 200rpx;
		/* 位于父容器顶部下方 200rpx 处 */
		width: 100%;
		/* 宽度百分之百 */

		/* 高度占满父容器下方 */
		background-color: #F8F9FD;
		/* 背景色，可根据需要修改 */
		z-index: 0;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;

		/* 确保在 content_top 之下 */
		// display: flex;
		// justify-content: center;
		// align-items: center;
		.content_bottom_success {
			margin-top: 100rpx;

			text-align: center;
			position: relative;

		}

		.container {

			position: absolute;

			left: 50%;
			transform: translateX(-50%);
		}

		.content_bottom_success_icon {
			position: relative;
			width: 420rpx;
			height: auto;
			/* 样式调整 */
		}

		.content_bottom_success_entry {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			/* 文本居中对齐 */
			color: #fff;
			/* 文本颜色，可根据需要调整 */
			width: 100%;
			/* 样式调整 */
		}

		.content_bottom_success_entry_title {
			margin-bottom: 24rpx;
		}

		.content_bottom_success_entry_title,
		.content_bottom_success_entry_time {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 48rpx;
			color: #FFFFFF;
			/* 样式调整 */
		}

		.content_bottom_success_title {
			display: flex;
			justify-content: center;
			/* text-align: center; */
			align-items: center;
			margin-top: 88rpx;

			.content_bottom_success_title_det {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 48rpx;
				color: #FF2D2D;
				margin-left: 26rpx;
			}
		}

		.content_bottom_list {
			position: absolute;
			bottom: 83rpx;
			left: 5%;

		
		}




	}

	.content_bottom_listBox {
		position: absolute;
		top: 500rpx;
		padding-bottom: 80rpx;
		left: 50%;
		width: 90%;
		transform: translateX(-50%);
		
		.content_bottom_listBox_sear{
			background: #FFFFFF;
			box-shadow: 0rpx 7rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 30rpx;
			padding: 33rpx;
		}
		.content_bottom_list_btn {
			text-align: center;
			    margin-top: 51rpx;
		
			span {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #FFFFFF;
				background: linear-gradient(90deg, #3A84FD 0%, #536AFF 100%);
				border-radius: 20rpx;
				padding: 25rpx 280rpx;
			}
		}
	}

	.content_bottom_xm_name {
		display: flex;
		margin-top: 10rpx;
		justify-content: space-between;

		.content_bottom_xm_name_left {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			flex: 0 0 50%;
			text-align: left;
		}

		.content_bottom_xm_name_right {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #999999;
			flex: 0 0 50%;
			text-align: right;
		}
	}
</style>